{% extends 'df_user/base_user.html' %}
{% load static %}

{% load address_handle %}

{% block title %}
    收货地址
{% endblock %}

{% block right_content %}

    <div class="right_content clearfix">
        <h3 class="common_title2">
            {% if request.resolver_match.url_name == 'change_site' %}
                编辑地址
            {% else %}
                添加地址
            {% endif %}

        </h3>
        <div class="site_con">
            <form action="" method="post">
                {% csrf_token %}
                <div class="form_group">
                    <label>收件人：</label>
                    <input type="text" name="receiver" value="{{ addr.receiver }}">
                    <p id="receiver_msg" style=" {% if not error.receiver %}display: none;{% endif %}color: red;">{{ error.receiver }}</p>
                </div>

                <div class="form_group form_group2 addr_area">
                    <label>选择区域：</label>
                    {% if request.resolver_match.url_name == 'change_site' %}
                        {% select_handle addr %}
                    {% else %}
                        <select name="" id="">
                            <option value="">---</option>
                            {% for province in provinces %}
                                <option value="{{ province.id }}">{{ province.name }}</option>
                            {% endfor %}
                        </select>
                    {% endif %}


                </div>

                <div class="form_group form_group2">
                    <label>详细地址：</label>
                    <textarea class="site_area" name="address">{{ addr.address }}</textarea>
                    <p id="address_msg" style=" {% if not error.address %}display: none;{% endif %}color: red;">{{ error.address }}</p>
                </div>

                <div class="form_group">
                    <label>手机：</label>
                    <input type="text" name="phone" value="{{ addr.phone }}">
                    <p id="phone_msg" style=" {% if not error.phone %}display: none;{% endif %}color: red;">{{ error.phone }}</p>
                </div>
                <div class="form_group">
                    <label>邮编：</label>
                    <input type="text" name="postcode" value="{{ addr.postcode }}">
                    <p id="postcode_msg" style=" {% if not error.postcode %}display: none;{% endif %}color: red;">{{ error.postcode }}</p>
                </div>
                <input type="submit" name="" value="提交" class="info_submit">
                <p id="all_msg" style=" {% if not error.all %}display: none;{% endif %}color: red;">{{ error.all }}</p>
            </form>
        </div>
    </div>

    <script>
        $(function () {


            $('.addr_area').on('change', function (e) {
                if (e.target.tagName.toLowerCase() == 'select') {

                    var $this = $(e.target);
                    var aid = $this.val();
                    if (!aid) {
                        return
                    }
                    $.get({
                            url: "{% url 'area_handle' %}",
                            data: {'aid': aid},
                            dataType: 'JSON',
                            success: function (data) {

                                // 删除后面的select
                                $this.nextAll().remove();

                                if (data.data.length != 0) {
                                    var ele = '';
                                    ele += '<select><option value="">--选择--</option>';
                                    $.each(data.data, function (index, item) {
                                        ele += '<option value="' + item.id + '">' + item.name + '</option>'
                                    });
                                    ele += '</select>';

                                    $this.after(ele);
                                }


                            }
                        }
                    )
                }

            });

            $('input:submit').click(function () {
                var aid = $('select:last').val();
                if (!aid){
                    alert("请先选择地区！");
                    return false
                }

                var receiver = $('input[name="receiver"]').val();
                if (!receiver || receiver.length<2){
                    alert("请输入收件人！");
                    return false
                }

                var phone = $('input[name="phone"]').val();
                if (!phone || phone.length != 11){
                    alert("请输入收件人手机号！");
                    return false
                }

                var addr = $('textarea[name="address"]').val();
                if (!addr || addr.length<5 ){
                    alert("请输入收件人地址！");
                    return false
                }
                $(this).attr('name', 'aid');
                $(this).val(aid);
            })

        })

    </script>
{% endblock %}